<template>
  <div class="dialog-form-components" v-if="dialogFormVisible">
    <el-dialog
      :title="dialogOption.title"
      :visible.sync="dialogFormVisible"
      :width="dialogOption.width"
      :before-close="_handleClose"
      :modal="dialogOption.modal"
      :fullscreen="dialogOption.fullscreen"
      append-to-body
      :show-close="dialogOption.showClose"
    >
      <!-- 头部自定义插槽 -->
      <div slot="title" v-if="dialogOption.titleSlot">
        <slot name="title"></slot>
      </div>
      <!-- 弹窗主体 -->
      <div class="container">
        <el-form ref="dialogForm" :rules="rules" :model="form" :inline="true">
          <el-row>
            <el-col :span="formItem.itemWidth" v-for="(formItem,index) in formOption" :key="index">
              <el-form-item
                :class="formItem.labelPosition || 'left'"
                :prop="formItem.prop"
                :label="formItem.label"
                :label-width="formItem.labelWidth || '80px'"
                size="medium"
              >
                <!-- 普通输入框 -->
                <template v-if="formItem.type === 'text'">
                  <el-input v-model="form[formItem.prop]" :placeholder="'请输入'+formItem.label"></el-input>
                </template>

                <!-- 长文本内容 -->
                <template v-if="formItem.type === 'textarea'">
                  <el-input type="textarea" v-model="form[formItem.prop]"></el-input>
                </template>

                <!-- 下拉选择 -->
                <template v-if="formItem.type === 'select'">
                  <el-select
                    v-model="form[formItem.prop]"
                    :placeholder="'请选择'+formItem.label"
                    clearable
                  >
                    <el-option
                      :label="select.label"
                      :value="select.value"
                      v-for="(select,index) in formItem.selectList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </template>

                <!-- 文件上传 -->
                <template v-if="formItem.type === 'upload'">
                  <el-upload
                    :file-list="form[formItem.prop]"
                    :action="formItem.action"
                    list-type="picture-card"
                    :on-preview="_handlePictureCardPreview"
                    :on-remove="_handleRemove"
                    :on-success="_handleSuccess(form[formItem.prop])"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible" width="50%" top="10vh" append-to-body>
                    <div class="imgbox">
                      <img :src="dialogImageUrl" alt />
                    </div>
                  </el-dialog>
                </template>

                <!-- 日期选择 -->
                <template v-if="formItem.type === 'date'">
                  <el-date-picker
                    v-model="form[formItem.prop]"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                  ></el-date-picker>
                </template>

                <!-- 开关 -->
                <template v-if="formItem.type === 'switch'">
                  <el-switch v-model="form[formItem.prop]"></el-switch>
                </template>

                <!-- 复选框 -->
                <template v-if="formItem.type === 'checkbox'">
                  <el-checkbox-group v-model="form[formItem.prop]">
                    <el-checkbox
                      v-for="(check,index) in formItem.checkList"
                      :label="check"
                      :key="index"
                    ></el-checkbox>
                  </el-checkbox-group>
                </template>

                <!-- 单选框 -->
                <template v-if="formItem.type === 'radio'">
                  <el-radio-group v-model="form[formItem.prop]">
                    <el-radio
                      v-for="(radio,index) in formItem.radioList"
                      :label="radio"
                      :key="index"
                    ></el-radio>
                  </el-radio-group>
                </template>

                <!-- 插槽 -->
                <template v-if="formItem.type === 'slot'">
                  <slot :name="formItem.slotName"></slot>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-button type="primary" @click="getValue">获取值</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { FORM_ITEM_TYPE } from "./FORM_TYPE";
export default {
  model: {
    prop: "dialogFormVisible",
    event: "close",
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    dialogOption: {
      type: Object,
      default: () => {
        return {
          titleSlot: false,
          title: "提示标题", // 头部标题
          width: "70%", // 弹窗宽度
          modal: true, // 是否需要遮罩层
          fullscreen: false, // 是否全屏
          showClose: true, // 是否显示关闭按钮
          showHeader: true, // 是否需要头部
        };
      },
    },
    formOption: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      form: {},
      rules: {},
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  created() {
    this._addRulesAndProp();
  },
  mounted() {},
  methods: {
    // 图片上传成功
    _handleSuccess(prop, response, file, fileList) {
      console.log(prop, response, file, fileList);
    },
    // 移出图片
    _handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览图片
    _handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 添加验证 和表单对象
    _addRulesAndProp() {
      this.$props.formOption.forEach((item) => {
        let rule = [
          {
            required: item.required || true,
            message:
              (item.type.indexOf("text") === -1 ? "请选择" : "请输入") +
              item.label,
            trigger: item.type.indexOf("text") === -1 ? "change" : "blur",
          },
        ];
        let value = null;
        if (item.type === "checkbox" || item.type === "upload") {
          value = [];
        }
        this.$set(this.form, item.prop, value);
        this.$set(this.rules, item.prop, rule);
      });
    },
    // 关闭弹窗
    _handleClose() {
      this.$emit("close");
    },
    // 获取数据
    getValue() {
      console.log(this.form);
    },
  },
};
</script>

<style scoped lang='less'>
.imgbox {
  width: 100%;
  height: 70vh;
  text-align: center;
  line-height: 70vh;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.dialog-form-components {
  .top {
    display: flex;
    flex-direction: column;
    /deep/.el-form-item__label {
      float: left;
      text-align: left;
    }
  }
  .left {
    /deep/.el-form-item__label {
      float: left;
      text-align: left;
    }
  }
  .el-upload-list__item-thumbnail {
    object-fit: cover;
  }
}
</style>
